/**
 * @title 竖向Menu基础样式
 * @description 子菜单竖向显示，可折叠。
 * @type other
 * demo2
 */

import {Menu} from "@tinper/next-ui";
import React from 'react';
import { Outlet, useNavigate } from "react-router-dom";

const MyMenu = () => {
	const SubMenu = Menu.SubMenu;
	const MenuItemGroup = Menu.ItemGroup;
    const [current, setCurrent] = React.useState('1');
    const navigate = useNavigate();

    const handleClick = (info) => {
        setCurrent(info.key);
    };

	return (
        <><Menu theme="dark" onClick={handleClick} style={{ width: 240 }} defaultOpenKeys={['demo3sub1']} selectedKeys={[current]} mode="inline">
            <SubMenu key="demo3sub1" title={<span><span>基础组件</span></span>}>
                <MenuItemGroup title="demo">
                    <Menu.Item key="1" onClick={() => navigate('/myTable?id=10')}>表格</Menu.Item>
                    <Menu.Item key="2" onClick={() => navigate('/myFrom/10')}>表单</Menu.Item>
                    <Menu.Item key="3" onClick={() => navigate('/myAntv?id=10')}>报表</Menu.Item>
                </MenuItemGroup>
            </SubMenu>
        </Menu>
        <div>
        <Outlet/>
        </div>
        </>
	)
	
}

export default MyMenu;